import Vue from 'vue'
import VueRouter from 'vue-router'

import layout from '../views/layout'
import home from '../views/home'
import qa from '../views/qa'
import video from '../views/video'
import my from '../views/my'
import search from '../views/search/index.vue'
import article from '../views/article/index.vue'


Vue.use(VueRouter)

// 导入页面组件
import login from '@/views/login'

// 路由映射数组
const routes = [
  {
    path: '/login',
    component: login
  },
  {
    path: '/',
    component: layout,
    children: [
      {
        path: '',
        component: home
      },
      {
        path: 'qa',
        component: qa
      },
      {
        path: 'video',
        component: video
      },
      {
        path: 'my',
        component: my
      },
    ]
  },
  {
    path: '/search',
    component: search
  },
  {
    path: '/article/:articleId',
    name: 'article', //命名路由，本质就是该路由映射的名称
    props: true, //会将动态路由数据 注入到页面组件的props中
    component: article
  },

]
// 实例化路由对象
const router = new VueRouter({
  routes
})

export default router
